<template>
	<u-popup :show="state.show" bgColor="transparent" mode="center" :closeOnClickOverlay="false" @close="close">
		<view class="Model-wapper ss-flex-col ss-col-center">
			<view class="title-Model ">
				<image src="/static/warn.png" mode=""></image>
			</view>
			<view class="content">
				{{props.tip}}
			</view>
			<view class="button-wapper ss-flex">
				<button class="cancelText " @tap="cancel">{{props.cancelText}}</button>
				<button class="confirmText" @tap="confirm">{{props.confirmText}}</button>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		reactive,
		unref,
		nextTick
	} from 'vue';
	import LC from '@/LC';
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
		tip: {
			type: String,
			default: '',
		},
		confirmText: {
			type: String,
			default: '确定',
		},
		cancelText: {
			type: String,
			default: '取消',
		},

	});

	let state = reactive({
		show: false
	})



	function close() {
		emit('close');
		state.show = false;
	}

	function open() {
		state.show = true;
	}

	function confirm() {
		close()
		emit('confirm');

	}

	function cancel() {
		close()
		emit('cancel');

	}
	let emit = defineEmits(['open', 'close', 'confirm', 'cancel']);
	defineExpose({
		close,
		open
	});
</script>

<style lang="scss" scoped>
	.Model-wapper {
		width: 610rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 38rpx 40rpx;


	}

	.content {
		margin-top: 48rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		line-height: 54rpx;
		text-align: center;
	}

	.button-wapper {
		margin-top: 24rpx;

		button {
			width: 190rpx;
			height: 70rpx;
			line-height: 70rpx;

			border-radius: 36rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #fff;
			background-color: #1e5cf5;
			padding: 0;
			margin: 0 20rpx;
		}

		.cancelText {
			background: #FFFFFF;
			color: #1e5cf5;
			border: 1px solid #1e5cf5;
		}

		.confirmText {

			color: #fff;
		}
	}

	.title-Model {
		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 32rpx;
		}

		font-size: 32rpx;
		font-family: PingFangSC,
		PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 48rpx;

	}
</style>